<template>
  <div class="min-h-screen bg-gray-50 py-12">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
      <!-- 页面标题 -->
      <div class="text-center mb-16">
        <div class="flex items-center justify-center mb-6">
          <div
            class="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl flex items-center justify-center mr-4">
            <span class="text-white font-bold text-2xl">For4</span>
          </div>
          <h1 class="text-4xl font-bold text-gray-900">人工智能视觉项目-4组</h1>
        </div>
        <p class="text-xl text-gray-600 max-w-4xl mx-auto">
          我们是一支专注于计算机视觉和人工智能技术的创新团队，致力于通过车载视频图像分析技术，为道路通行状态判断提供准确、实时的解决方案。
        </p>
      </div>

      <!-- 项目介绍 -->
      <div class="bg-white rounded-2xl shadow-lg p-8 mb-16">
        <h2 class="text-3xl font-bold text-gray-900 text-center mb-8">项目介绍</h2>
        <div class="max-w-4xl mx-auto">
          <div class="mb-8">
            <h3 class="text-2xl font-semibold text-gray-900 mb-4">预选题：基于车载视频图像的动态路况分析</h3>
            <p class="text-lg text-gray-700 leading-relaxed mb-6">
              通过对车载视频图像检测，基于视频图像中识别到的路面信息来判断道路通行状态（畅通、缓行、拥堵），提高道路路况状态判断的准确性，从而提升地图用户的出行体验。
            </p>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div class="bg-blue-50 rounded-xl p-6">
              <h4 class="text-lg font-semibold text-blue-900 mb-3">选题地址</h4>
              <a
                href="https://tianchi.aliyun.com/competition/entrance/531809?spm=5176.12281973.J_6-HJZaSjQocH7SIdvbK02.1.1d383b74SxMB7r"
                target="_blank"
                rel="noopener noreferrer"
                class="text-blue-600 hover:text-blue-800 underline break-all">
                https://tianchi.aliyun.com/competition/entrance/531809
              </a>
            </div>

            <div class="bg-green-50 rounded-xl p-6">
              <h4 class="text-lg font-semibold text-green-900 mb-3">数据集下载</h4>
              <a
                href="https://tianchi.aliyun.com/dataset/144857?spm=a2c22.12281978.0.0.626c1ebboIkXc0"
                target="_blank"
                rel="noopener noreferrer"
                class="text-green-600 hover:text-green-800 underline break-all">
                https://tianchi.aliyun.com/dataset/144857
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- 团队介绍 -->
      <div class="mb-16">
        <h2 class="text-3xl font-bold text-gray-900 text-center mb-12">我们的团队</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
          <div v-for="(member, index) in teamMembers" :key="index" class="text-center">
            <!-- 成员头像 -->
            <div class="relative w-32 h-32 mx-auto mb-4">
              <div class="relative w-full h-full rounded-full overflow-hidden border-4 border-white shadow-lg">
                <img
                  :src="member.avatar"
                  :alt="member.name"
                  class="w-full h-full object-cover"
                  @error="handleImageError" />
              </div>
            </div>

            <!-- 成员信息 -->
            <div>
              <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ member.name }}</h3>
              <p class="text-gray-600 text-sm mb-2">{{ member.role }}</p>
              <p class="text-gray-500 text-xs">{{ member.field }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 技术栈 -->
      <div class="mb-16">
        <h2 class="text-3xl font-bold text-gray-900 text-center mb-12">技术栈</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
          <div
            v-for="tech in technologies"
            :key="tech.name"
            class="bg-white rounded-lg p-6 text-center shadow-md hover:shadow-lg transition-shadow">
            <div class="text-4xl mb-3">{{ tech.icon }}</div>
            <h3 class="text-lg font-semibold text-gray-900 mb-2">{{ tech.name }}</h3>
            <p class="text-sm text-gray-600">{{ tech.description }}</p>
          </div>
        </div>
      </div>

      <!-- 项目特色 -->
      <div class="bg-white rounded-2xl shadow-lg p-8">
        <h2 class="text-3xl font-bold text-gray-900 text-center mb-8">项目特色</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div class="text-center">
            <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M13 10V3L4 14h7v7l9-11h-7z"></path>
              </svg>
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-2">实时分析</h3>
            <p class="text-gray-600">基于车载视频的实时路况分析，快速判断道路通行状态</p>
          </div>
          <div class="text-center">
            <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-2">准确识别</h3>
            <p class="text-gray-600">采用深度学习算法，准确识别畅通、缓行、拥堵三种状态</p>
          </div>
          <div class="text-center">
            <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-2">智能优化</h3>
            <p class="text-gray-600">持续优化算法模型，提升地图用户出行体验</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

// 团队成员数据
const teamMembers = ref([]);

// 技术栈数据
const technologies = ref([
  {
    name: "Vue.js",
    icon: "⚡",
    description: "现代化前端框架",
  },
  {
    name: "Computer Vision",
    icon: "👁️",
    description: "计算机视觉技术",
  },
  {
    name: "Deep Learning",
    icon: "🧠",
    description: "深度学习算法",
  },
  {
    name: "Video Analysis",
    icon: "🎥",
    description: "视频图像分析",
  },
  {
    name: "Traffic Detection",
    icon: "🚗",
    description: "交通状态检测",
  },
  {
    name: "Real-time Processing",
    icon: "⚡",
    description: "实时数据处理",
  },
  {
    name: "AI Models",
    icon: "🤖",
    description: "AI模型训练",
  },
  {
    name: "Cloud Computing",
    icon: "☁️",
    description: "云计算与部署",
  },
]);

// 处理图片加载错误
const handleImageError = (event) => {
  // 如果图片加载失败，显示默认头像
  event.target.src =
    "";
};

// 初始化团队成员数据
onMounted(() => {
  // 从persona目录获取团队成员信息
  const memberData = [
    { name: "泉", role: "-", field: "数据集分析和清洗" },
    { name: "铱星天", role: "学生", field: "数据集分析和清洗" },
    { name: "之乎者也", role: "PM", field: "目标检测模型开发与调优" },
    { name: "引辉", role: "PM", field: "目标检测模型开发与调优" },
    { name: "哈哈", role: "程序员", field: "运动分析和车辆跟踪算法开发与调优" },
    { name: "Leo", role: "研发管理", field: "运动分析和车辆跟踪算法开发与调优" },
    { name: "阿磬", role: "焊装装备工艺", field: "运动分析和车辆跟踪算法开发与调优" },
    { name: "Xq", role: "测试工程师", field: "分类模型构建和调优" },
    { name: "巽染离殇", role: "PM", field: "分类模型构建和调优" },
    { name: "一环", role: "汽车市场分析", field: "模型测试" },
    { name: "李重楼", role: "web工程师", field: "前端开发" },
  ];

  teamMembers.value = memberData.map((member) => ({
    name: member.name,
    role: member.role,
    field: member.field,
    avatar: `./persona/${member.name}.jpg`,
  }));
});
</script>
